<template>
  <div class="goodsDetailPage">
    <div class="headerBox" :class="headerFix?'headerFix':''">
      <van-nav-bar
        :title="goodsDetail.goodsName"
        left-arrow
        @click-left="goBack"
      />
    </div>
    <div class="goodsBox" v-if="goodsDetail.goodsName">
      <van-swipe class="my-swipe" :autoplay="3000"  indicator-color="white">
        <van-swipe-item v-for="(item,index) in goodsDetail.goodsAlbums" :key="index">
          <div class="goodsImg">
            <img :src="imgPath+item.albumUrl" alt="">
          </div>
        </van-swipe-item>
      </van-swipe>
      <div class="subGoodsBox">
        <div class="goodsHead">
          <p class="goodsTitle">{{goodsDetail.goodsName}}</p>
          <p class="goodsStock">剩余份额 {{Number(goodsDetail.goodsSellingStock)+'/'+goodsDetail.goodsStock}}</p>
        </div>
        <p class="txt3" style="margin:0.1rem 0 0.2rem">{{goodsDetail.companySubscriptionPercentage?`*星际港湾领投${goodsDetail.companySubscriptionPercentage*100}%的份额`:'*参与IPFS网络，共创数字财富'}}</p>
        <p class="money"><span class="txt1">￥</span><span class="txt2">{{goodsDetail.goodsSellingPrice}}/份</span></p>
        <!-- <div class="goodsContent">
          There are many things that are important to catalog eee design. Your images must be sharp and appealing. There are many things .
        </div> -->
        
      </div>
      <div class="goodsPledge">
        <p>港湾矿场</p>
        <p>专业算法</p>
        <p>安全稳定</p>
        <p>定制服务</p>
      </div>
      <div v-html="goodsDetail.goodsDetails" class="goodsProfiles"></div>
      <div class="fieldBox" style="margin-top:0.32rem">
        <p class="labelTitleL">矿场信息</p>
        <div class="subField">
          <p class="fieldLabel">矿场份额</p>
          <p class="fieldVal">{{goodsDetail.goodsStock}}份</p>
        </div>
        <div class="subField">
          <p class="fieldLabel">24h算力增量</p>
          <p class="fieldVal">{{goodsDetail.computingPower}}T/天</p>
        </div>
        <div class="subField">
          <p class="fieldLabel">矿场位置</p>
          <p class="fieldVal">{{goodsDetail.storePercentage}}</p>
        </div>
        <div class="subField">
          <p class="fieldLabel">工程师配备</p>
          <p class="fieldVal">{{goodsDetail.mineComputingPower}}人</p>
        </div>
      </div>
    </div>
    <div class="handlerBox">
      <p class="handlerBtn" @click="goBuy">立即认购</p>
    </div>
    <van-popup v-model="popupShow" round position="bottom">
      <div class="payGoodsBox">
        <div class="subGoods">
          <div class="subGoodsL">
            <img src="@/assets/img/goods/goods2.png" alt="">
          </div>
          <div class="subGoodsR">
            <p class="txt6">{{goodsDetail.goodsName}}</p>
            <p class="txt3" style="margin-bottom:0.16rem">剩余份额： {{Number(goodsDetail.goodsSellingStock)}}</p>
            <p><span class="txt4">￥</span><span class="txt5">{{goodsDetail.goodsSellingPrice}}/份</span></p>
          </div>
        </div>
        <div class="stepper">
          <span>份额</span>
          <van-stepper v-model="orderQuantity" min="1" :max="goodsDetail.goodsSellingStock" integer />
        </div>
        <p>支付方式</p>
        <div class="payStyle">
          <p class="handlerBtn handlerBtn1" @click="payStyle=1" :class="payStyle==1?'active':''">在线支付</p>
          <p class="handlerBtn handlerBtn2" @click="payStyle=2" :class="payStyle==2?'active':''">报 单</p>
        </div>

      </div>
      <div class="payhandlerBtn">
        <p class="handlerBtn" @click="goConfirmOrder">确 定</p>
      </div>
    </van-popup>
  </div>
</template>


<script>
import config from "@/config/env";
export default {
  data() {
    return {
      headerFix:false,
      popupShow:false,
      orderQuantity:1,
      id:'',
      storeId:'',
      goodsDetail:{},
      payStyle:1,
      imgPath:'',
      appDom:null
    };
  },
  mounted(){
    if (window.api!=undefined&&api.systemType == 'android') {
      // this.appDom = document.getElementById('app')
      this.appDom = window
      this.appDom.addEventListener('scroll', this.scrollToTop, true)
    }
  },
  activated() {
    this.goodsDetail={}
    this.imgPath = config.ossUrl;
    this.id=this.$route.query.id
    this.storeId=this.$route.query.storeId
    this.popupShow=false
    this.getMineGoodsDetailFunc()
  },
  destroyed () {
    if (window.api!=undefined&&api.systemType == 'android') {
      this.appDom.removeEventListener('scroll', this.scrollToTop)
    }
  },
  methods: {
    scrollToTop () {
      // let pageYOffset = this.appDom.scrollTop 
      let pageYOffset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      console.log(pageYOffset)
      if(pageYOffset>50) {
        this.headerFix=true
      } else {
        this.headerFix=false
      }
    },
    async getMineGoodsDetailFunc(){
        this.$toast.loading({
            message: '加载中...',
            forbidClick: true,
        });
        let res = await this.$http.getMineGoodsDetail({goodsId:this.id});
        if (res) {
          this.goodsDetail=res.data
          this.$toast.clear();
        } else {
          this.$toast.clear();
        }
    },
    goBuy(){
      this.popupShow=true
    },
    goBack(){
       this.$router.push({name:'index'})
    },
    goConfirmOrder(type){
      if (this.orderQuantity>5) {
        this.$toast('单笔订单最大购买份额不能大于5份')
        return
      }
      let payInfo={goodsId:this.id,goodsName:this.goodsDetail.goodsName,orderQuantity:this.orderQuantity,goodsSellingPrice:this.goodsDetail.goodsSellingPrice,earnestMoneyPercentage:this.goodsDetail.earnestMoneyPercentage}
      let payInfoEncode=encodeURIComponent(JSON.stringify(payInfo))
      let name = this.payStyle==1?'confirmOrder':'otherPay'
      this.$router.push({name:name,query:{info:payInfoEncode}})
    },
  }
};
</script>
<style>
.goodsDetailPage .van-nav-bar{
  background-color:transparent;
  transition: all .2s;
}
.goodsDetailPage .van-nav-bar .van-icon,.goodsDetailPage .van-nav-bar__title{
  color: #fff !important;
  font-size: 0.36rem;
}
.goodsDetailPage .van-hairline--bottom::after{
  border-bottom-width:0
}
.van-swipe__indicators{
  left:auto !important;
  right: 0.1rem;
}
.van-swipe__indicator.van-swipe__indicator--active{
  width: 0.24rem;
  height: 0.12rem;
  background:rgba(2,186,214,1) !important;
  border-radius:0.08rem;
}
.van-swipe__indicator{
  width:0.12rem;
  height:0.12rem;
  background: #fff !important;
  opacity: 1 !important;
}
.headerFix .van-nav-bar{
  background-color:transparent;
}
.headerBox.headerFix{
  background-color:#00C8E7 !important;
  transition: all .2s !important;
}
.goodsProfiles img{
  display: block;
}
</style>
<style scoped>
.goodsDetailPage{
  background: #fff;
  min-height: 100vh;
  padding-bottom: 2.4rem;
}
.headerBox{
  background: rgba(0,0,0,.4);
  background-size: cover;
  overflow: hidden; 
  position: fixed;
  width: 100%;
  color: #fff;
  z-index: 1;
}
.headerBox .headerTitle{
  font-size: 0.44rem;
  font-weight:600;
}
.headerBox .headerTxt{
  color: #02BAD6;
  font-weight:500;
}
.subGoodsBox{
  margin: 0 0.28rem;
  padding-bottom: 0.2rem;
}
.goodsImg img{
  width: 100%;
  height: 4.2rem;
}
.goodsHead{
  display: flex;
  justify-content: space-between;
  margin-top: 0.2rem;
}
.goodsTitle{
  font-size: 0.36rem;
  font-weight: 600;
}
.goodsStock{
  height: 0.52rem;
  line-height: 0.52rem;
  padding: 0 0.12rem;
  background:rgba(0,200,231,0.11);
  border-radius:4px;
}
.money{
  color: #F30F0F;
  font-weight: bold;
  line-height: 0.48rem;
  margin-top: 0.12rem;
}
.txt1{
  font-size: 0.24rem;
}
.txt2{
  font-size: 0.34rem;
}
.goodsContent{
  font-size:0.29rem;
  line-height: 0.4rem;
  margin-top: 0.14rem;
}
.goodsPledge{
  display: flex;
  flex: 1;
  align-items: center;
  height: 0.96rem;
  background: #F3F3F3;
}
.goodsPledge p{
  position: relative;
  flex: 1;
  text-align: center;
}
.goodsPledge p::after{
  display: block;
  position: absolute;
  right: 0;
  top: 0.07rem;
  content: '/';
  font-size: 0.32rem;
  color: #CBCBCB;
}
.goodsPledge p:last-child::after{
  content: '';
}
.handlerBox{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0px -4px 8px 0px rgba(0,0,0,0.05);
}
.handlerBtn{
  width: 6.94rem;
  height: 0.82rem;
  line-height: 0.82rem;
  border-radius: 0.41rem;
  text-align: center;
  color: #fff;
  font-size:0.34rem;
  background: #F6741F;
  margin: 0 auto;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}
.payStyle .handlerBtn{
  width: 1.58rem;
  height: 0.64rem;
  line-height: 0.64rem;
  border-radius: 0.32rem;
  background: #C8CEDA;
  font-size: 0.29rem;
  margin: 0.3rem 0.2rem 0.3rem 0;
}
.payStyle .handlerBtn.active{
  background: #00D0EB;
}
.payGoodsBox{
  padding: 0.4rem;
}
.subGoods{
  display: flex;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #ECECEC;
}
.subGoodsL img{
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.08rem;
  margin-right: 0.16rem;
}
.money2{
  color: #F30F0F;
  font-weight: 600;
  margin-bottom: 0.1rem;
}
.txt3{
  font-size: 0.28rem;
  color: #666;
}
.txt4{
  font-size: 0.24rem;
}
.txt5{
  font-size: 0.36rem;
  font-weight: 600;
}
.txt6{
  font-size: 0.32rem;
  margin-bottom: 0.12rem;
  margin-top: 0.1rem;
  font-weight: 600;
}
.stepper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.4rem 0 0.78rem;
}
.payhandlerBtn{
  padding: 0.18rem 0;
  border-top: 1px solid #F1F1F1;
}
.payStyle{
  display: flex;
  align-items: center;
}
.fieldBox{
  margin: 0.28rem;
}
.labelTitleL{
  font-size: 0.3rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.labelTitleL::before{
  display: inline-block;
  content: '';
  position: relative;
  width: 0.06rem;
  height: 0.16rem;
  background: #00C8E7;
  border-radius: 0.03rem;
  vertical-align: middle;
  margin-right: 0.1rem;
}
.subField{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 0.94rem;
  border-bottom: 1px solid #F2F1F1;
  margin: 0 0.14rem;
}
.fieldLabel{
  font-size: 0.28rem;
}
.fieldVal{
  font-size: 0.28rem;
  color: #2F3E3E;
  font-weight: 600;
}
</style>
